<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>问卷详情-默问台</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/assets/css/app.css">
    <script src="/assets/js/jquery.min.js"></script>

</head>

<body data-type="index" xmlns:th="http://www.thymeleaf.org">
<script src="/assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <header>
        <!-- logo -->
        <div class="am-fl tpl-header-logo">
        </div>
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">
            <!-- 侧边切换 -->

            <!-- 搜索 -->

            <!-- 其它功能-->
            <div class="am-fr tpl-header-navbar">
                <ul>
                    <!-- 欢迎语 -->
                    <li class="am-text-sm tpl-header-navbar-welcome">
                        <a href="javascript:;">欢迎你, <span>admin</span> </a>
                    </li>

                    <!-- 新邮件 -->

                    <!-- 新提示 -->


                    <!-- 退出 -->
                    <li class="am-text-sm">
                        <a href="javascript:;">
                            <span class="am-icon-sign-out"></span> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </header>
    <!-- 风格切换 -->

    <!-- 侧边导航栏 -->
    <div class="left-sidebar">
        <!-- 用户信息 -->


        <!-- 菜单 -->
        <ul class="sidebar-nav">

            <li class="sidebar-nav-link">
                <a href="/bo/toHome" class="active">
                    <i class="am-icon-home sidebar-nav-link-logo"></i>问卷管理
                </a>
            </li>

            <li class="sidebar-nav-link">
                <a href="/bo/toGood" >
                    <i class="am-icon-home sidebar-nav-link-logo"></i>商品管理
                </a>
            </li>

            <li class="sidebar-nav-link">
                <a href="/bo/toOrder" >
                    <i class="am-icon-home sidebar-nav-link-logo"></i>订单管理
                </a>
            </li>

        </ul>
    </div>


    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="row-content am-cf">
            <div class="row  am-cf">

                <span style="color:#fff"> 问卷管理>问卷详情</span>
                <form class="am-form tpl-form-line-form">

                    <input type="hidden" id="paperId" th:value="${paper.id}">

                    <div class="am-form-group">
                        <label for="subject" class="am-u-sm-3 am-form-label">问卷名称 <span class="tpl-form-line-small-title"></span></label>
                        <div class="am-u-sm-9">
                            <input type="text" class="tpl-form-input" id="subject" th:value="${paper.subject}"  readonly>
                            <small></small>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label for="titleName" class="am-u-sm-3 am-form-label">题目名称<span class="tpl-form-line-small-title"></span></label>
                        <div class="am-u-sm-9">
                            <input type="text" class="tpl-form-input" id="titleName" placeholder="题目名称">
                            <small></small>
                        </div>
                    </div>

                    <div id="answerDiv"></div>


                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success" onclick="createAnswer();">添加选项</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success" onclick="save();">保存题目</button>
                        </div>
                    </div>
                </form>

            </div>

            <div id="topicDiv" class="row-content am-cf am-form tpl-form-line-form">

            </div>

        </div>
    </div>
</div>
</div>
<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/amazeui.datatables.min.js"></script>
<script src="/assets/js/dataTables.responsive.min.js"></script>
<script src="/assets/js/app.js"></script>

<script>
    $(document).ready(function () {
        listTopics();
    });

    var count = 1;

    function del(id) {
        $('#' + id).remove();
    }

    function createAnswer() {


        var msg = ' <div class="am-form-group" id="'+count+'">\n' +

            '            <label for="answer'+count+'" class="am-u-sm-3 am-form-label">选项'+count+'<span class="tpl-form-line-small-title"></span></label>\n' +
            '        <div class="am-u-sm-9">\n' +
            '            <input type="text" class="tpl-form-input" id="answer'+count+'" name="answer" placeholder="选项内容">\n' +
            '            <small></small>\n' +
            '<a href="###" onclick="del('+count+')">删除</a>' +
            '            </div>\n' +
            '            </div>';

        $('#answerDiv').append(msg);

        count ++;
    }

    function save() {

        if ("" === $('#titleName').val()) {
            alert('请输入题目名称');
            return;
        }

        var answerArray = [];
        var answers = document.getElementsByName("answer");
        for (let i=0;i<answers.length;i++) {
            let answer = answers[i];
            answerArray.push(answer.value);
        }

        if (answerArray.length <= 0) {
            alert("请添加选项");
            return;
        }

        $.ajax({
            url: '/bo/topic/save',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                paperId : $('#paperId').val(),
                titleName : $('#titleName').val(),
                optionTitles : answerArray.join(',')

            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (ajaxData.code !== 1000) {
                    alert(ajaxData.message);
                    return;
                }

                alert('保存成功');
                window.location.reload();
                $('#titleName').val('');

            }
        });

    }

    function listTopics() {
        $.ajax({
            url: '/bo/topic/list',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                paperId : $('#paperId').val()
            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (ajaxData.code !== 1000) {
                    alert(ajaxData.message);
                    return;
                }


                var result = ajaxData.data;
                var msg = '';
                for (var i=0;i<result.length;i++) {
                    msg += '<div style="color:#fff">';
                    msg += '<div>'+(i+1) + '. ' + result[i].titleName+'</div>';

                    msg += '<div>';
                    msg += '<ul>';

                    let options = result[i].options;
                    for (let j=0;j<options.length;j++) {
                        msg += '<li>&nbsp;&nbsp;&nbsp;-&nbsp;'+ options[j].optionTitle+'</li>';
                    }

                    msg += '</ul>';
                    msg += '<a href="###" onclick="delTopic('+result[i].id+')">删除</a>';
                    msg += '</div>';
                    msg += '<span>------------------------------<br></span>';
                }

                $('#topicDiv').html(msg);

            }
        });
    }

    function delTopic(id) {
        $.ajax({
            url: '/bo/topic/del',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                topicId:id
            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (ajaxData.code !== 1000) {
                    alert(ajaxData.message);
                    return;
                }

                listTopics();

                alert('删除成功');

            }
        });
    }


</script>

</body>

</html>